<!-- 学社 - 动态 - 回答详情 -->
<template>
  <view>
    <z-paging-list ref="list" v-model="state.list" :safe-area-inset-bottom="false" @loadData="loadData">
      <z-navbar title="回答详情" :border-bottom="true"></z-navbar>
      <view class="px-4 pt-5">
        <!-- 顶部 -->
        <view class="flex items-center h-80">
          <u-image shape="circle" width="80" height="80" :src="state.detailData?.user?.avatar"
            @click="toHomePage(state.detailData?.user?.id)"></u-image>
          <view class="flex flex-col justify-between ml-3 h-76">
            <view class="flex items-center">
              <view class="flex-1 text-single c-#333 text-32" @click="toHomePage(state.detailData?.user?.id)">{{
                state.detailData?.user?.nickname }}</view>
              <view v-if="state.detailData?.member_position > 0" class="flex-shrink-0 tag-identity mx-2">{{
                formatIdentity(state.detailData?.member_position) }}</view>
              <image v-if="state.detailData?.user?.vip_level > 0" mode="aspectFit"
                :class="['flex-shrink-0', state.detailData?.user?.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                :src="`/static/images/user/ic_vip_tag_${formatVipIcon(state.detailData?.user?.vip_level)}.png`" />
            </view>
            <view class="c-#999 text-24">{{ state.detailData?.createtime }}</view>
          </view>
          <!-- 自己才可以删 -->
          <view v-if="state.detailData?.is_self" class="flex-1 flex justify-end">
            <u-image width="48" height="48" src="/static/images/home/ic_trend_delete.png"
              @click="onDelete(state.detailData?.id)"></u-image>
          </view>
        </view>
        <!-- 问题 -->
        <view class="question-card">
          <!-- 提问人 -->
          <view class="mt-6 text-sm c-#666">
            回复
            <text class="c-#F4AF22 mr-2" v-for="(item, index) in state.detailData?.at_info" :key="index"
              @click="toHomePage(item.id)">@{{ item.nickname
              }}</text>
          </view>
          <!-- 标题 -->
          <view class="mt-2 mb-5 c-#333 text-sm font-bold"
            @click="navigate(`/package_society/pages/trend/question/detail?id=${state.detailData.question_id}`)">{{
              state.detailData?.question?.content }}</view>
          <!-- 描述 -->
          <view class="c-#666 text-sm mb-3">{{ state.detailData?.content }}</view>
          <u-image v-if="isSingleQuestionImg" border-radius="10" width="100%" height="352"
            :src="state.detailData?.slideshow[0]" @click="previewImage(state.detailData?.slideshow, 0)"></u-image>
          <view v-else class="grid grid-cols-3 gap-3">
            <u-image width="196" height="196" border-radius="16"
              v-for="(answerImg, answerIndex) in state.detailData?.slideshow" :key="answerIndex" :src="answerImg"
              @click="previewImage(state.detailData?.slideshow, index)" />
          </view>
          <view class="flex justify-end items-center c-#999 text-24 mt-7">
            <view class="flex items-center">
              <u-image width="38" height="34" src="/static/images/home/ic_trend_comment.png"></u-image>
              <view class="ml-1">{{ state.detailData?.comment_num }}</view>
            </view>
            <view class="flex items-center ml-3">
              <image class="w-42 h-36" @click.stop="onLikeSwitch(state.detailData.id, state.detailData.is_like)"
                :src="`/static/images/home/ic_trend_${state.detailData?.is_like ? 'like' : 'nolike'}.jpg`"></image>
              <view class="ml-1">{{ state.detailData?.like_num }}</view>
            </view>
          </view>
        </view>
        <!-- 点赞人列表 -->
        <view class="mt-3 c-#666 text-sm" v-if="state.detailData?.like_info.length > 0">
          <view class="mr-2 inline-block h-38 align-middle">
            <image class="inline-block w-30 h-26" src="/static/images/home/ic_comment_like.png"></image>
          </view>
          <text v-for="(item, index) in state.detailData?.like_info" :key="index">
            {{ item.user.nickname }}<template v-if="index != state.detailData?.like_info.length - 1">、</template></text>
          <text>等{{ state.detailData?.like_info.length }}人觉得好不错</text>
        </view>
        <!-- 评论 -->
        <view class="mt-4 pb-10">
          <view class="c-#333 text-40 font-bold">评论（{{ state.commentNum }}）</view>
          <!-- 父评论 -->
          <view v-for="(item, index) in state.list" :key="index" class="comment-item">
            <view class="comment-item-hd">
              <u-image class="flex-shrink-0" shape="circle" width="40" height="40" :src="item.avatar"
                @click="toHomePage(item.user_id)"></u-image>
              <view class="flex-1 c-#333 text-32 mx-2 text-single" @click="toHomePage(item.user_id)">{{ item.nickname }}
              </view>
              <view v-if="item.member_position > 0" class="flex-shrink-0 tag-identity mx-2">{{
                formatIdentity(item.member_position) }}
              </view>
              <image v-if="item.vip_level > 0" mode="aspectFit"
                :class="['flex-shrink-0', item.vip_level > 1 ? 'w-140 h-40' : 'w-112 h-28']"
                :src="`/static/images/user/ic_vip_tag_${formatVipIcon(item.vip_level)}.png`" />
              <view class="flex-shrink-0 c-#999 text-20  mx-2">{{ item.createtime }}</view>
              <view class="flex-shrink-0 flex justify-end items-center">
                <view class="mr-1 text-24 c-#999">{{ item.like_num }}</view>
                <image class="w-26 h-22 mt-1" @click.stop="onCommentLike(item.id, item.is_like)"
                  :src="`/static/images/home/ic_trend_${item.is_like ? 'like' : 'nolike'}.jpg`"></image>
              </view>
            </view>
            <view class="c-#666 text-sm mt-1" @click="onReply(item.id)">{{ item.comment_content }}</view>
            <!-- 子评论 -->
            <view v-for="(commentItem, commentIndex) in item.reply" :key="commentIndex">
              <view class="comment-item-hd mt-2">
                <u-image shape="circle" width="40" height="40" :src="commentItem.user?.avatar"
                  @click="toHomePage(commentItem.user?.id)"></u-image>
                <view class="c-#F4AF22 text-32 ml-2" @click="toHomePage(commentItem.user?.id)">{{
                  commentItem.user?.nickname }}</view>
                <u-icon class="mx-1" name="play-right-fill" color="#D3D3D3" size="16"></u-icon>
                <view class="c-#333 text-32 mr-2">{{ commentItem.reply?.nickname }}</view>
                <view class="c-#999 text-20">{{ commentItem.createtime }}</view>
                <view class="flex-1 flex justify-end items-center">
                  <view class="mr-1 text-24 c-#999">{{ commentItem.like_num }}</view>
                  <image class="w-24 h-22 mt-1" @click.stop="onCommentLike(commentItem.id, commentItem.is_like)"
                    :src="`/static/images/home/ic_trend_${commentItem.is_like ? 'like' : 'nolike'}.jpg`"></image>
                </view>
              </view>
              <view class="c-#666 text-sm mt-1 ml-7" @click="onReply(commentItem.id)">{{ commentItem.comment_content }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <template #bottom>
        <u-line color="#EEEEEE" />

        <view :style="{ bottom: state.bottom + 'px' }"
          class="w-full flex items-center bg-#fff border-bottom px-4 h-150  fixed">
          <view class="input-style">
            <image class="w-28 h-23" src="/static/images/common/ic_discuss.jpg" />
            <input :adjust-position="false" @focus="onFocus" @blur="onBlur" v-model="state.comment" class="flex-1 ml-2"
              :placeholder="state.placeholder" clearable />
          </view>
          <view class="btn-send" :class="[{ 'opacity-50': !state.comment, 'pointer-events-none': !state.comment }]"
            @click="onPublishComment">发送</view>
        </view>

      </template>
    </z-paging-list>
  </view>
</template>

<script setup>
import { showModal, showToast, previewImage } from '@/common/util/uni'
import { refreshPrePage, formatIdentity, formatVipIcon, toHomePage } from '@/common/util/util'
import { getAnswerDetail, postAnswerGiveLike, postAnswerCancelLike, postAmswerDel, postAnswerCommentAdd, getAnswerCommentList, postAnswerCommentGiveLike, postAnswerCommentCancelLike } from '@/common/http/module/society.js'
import { navigate } from '@/common/util/uni';


const list = ref();
const state = reactive({
  answer_id: '', // 详情id
  detailData: null, // 动态详情数据
  placeholder: '来都来了，说两句吧',
  comment_id: '', // 评论id
  isLike: true,
  list: [1, 2, 3], // 评论列表
  commentNum: 0, //评论数量
  bottom: 0
})

const isSingleQuestionImg = computed(() => {
  return state.detailData?.slideshow.length == 1
})

// 回答点赞
function onLikeSwitch(answer_id, is_like) {
  const postMethods = is_like ? postAnswerCancelLike : postAnswerGiveLike
  postMethods({ answer_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    loadDetail()
  })
}

// 评论点赞
function onCommentLike(comment_id, is_like) {
  const postMethods = is_like ? postAnswerCommentCancelLike : postAnswerCommentGiveLike
  postMethods({ comment_id }).then(() => {
    showToast(`${is_like ? '取消点赞' : '点赞'}成功`)
    // 刷新评论列表
    refreshCurrentPage()
  })
}
function onFocus(e) {
  console.log(e.detail.height, "kkkk")
  state.bottom = Number(e.detail.height)
}
function onBlur() {
  state.bottom = 0
}

// 发表评论
function onPublishComment() {
  if (!state.comment) {
    showToast('请输入内容', 'error')
    return
  }
  postAnswerCommentAdd({
    answer_id: state.answer_id,
    content: state.comment,
    comment_id: state.comment_id ?? '' // 回复的评论id(评论时不传，回复时必传)
  }).then(() => {
    showToast('评论成功')
    state.comment = ''
    state.placeholder = '来都来了，说两句吧'
    state.comment_id = ''
    refreshCurrentPage()
    // 刷新详情评论数
    loadDetail()
  })
}

// 回复
function onReply(comment_id) {
  state.placeholder = '回复'
  state.comment_id = comment_id
}

// 删除
function onDelete(id) {
  showModal({
    confirmText: '删除',
    content: '是否删除该回答',
    success: function (res) {
      if (res.confirm) {
        // 删除接口
        postAmswerDel({ answer_id: id }).then(() => {
          showToast('删除成功')
          refreshPrePage('refresh')
          setTimeout(() => uni.navigateBack(), 600)
        })
      }
    }
  });
}

// 获取回答详情
function loadDetail() {
  getAnswerDetail(state.answer_id).then(res => {
    console.log('回答详情', res.data);
    state.detailData = res.data
  })
}

// 刷新当前页
function refreshCurrentPage() {
  list.value.onRefreshCurrentPage()
}

// 获取评论
function loadData(page) {
  getAnswerCommentList(page, state.answer_id).then(res => {
    state.commentNum = res.data?.total
    list.value.onLoadResult(page ? res.data?.data : []);
  })
}

onLoad(options => {
  state.answer_id = options.id
  loadDetail()
  loadData;
});
</script>

<style lang="scss" scoped>
:deep(.input-placeholder) {
  color: #999
}

:deep(input) {
  color: #333
}
.question-card {
  padding: 20rpx 30rpx;
  border-radius: 6px;
  background-color: #FFFFFF;
  box-shadow: -1.2246468525851679e-16px 2px 6px 0px rgba(206, 143, 12, 0.1);
}

.tag-identity {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rpx 6rpx;
  border-radius: 4rpx;
  background-color: #F4AF22;
  color: #FFFFFF;
  font-size: 20rpx;
}

.comment-item {
  margin-top: 20rpx;
  padding-bottom: 24rpx;
  border-bottom: 2rpx solid #EEE;
}

.comment-item:last-child {
  border: none;
}

.comment-item-hd {
  display: flex;
  align-items: center;
  height: 44rpx;
}

.input-style {
  display: flex;
  align-items: center;
  padding-left: 32rpx;
  padding-right: 10rpx;
  background-color: #f5f5f5;
  color: #b5b5b5;
  border-radius: 12rpx;
  flex: 1;
  height: 72rpx;
  font-size: 28rpx;
  line-height: 28rpx;
  border: 2rpx solid #DCDCDC;
  margin-top: 8rpx;
}

.btn-send {
  margin-left: 16rpx;
  padding: 16rpx 40rpx;
  border-radius: 10rpx;
  background-color: #F4AF22;
  color: #fff;
  font-size: 28rpx;
  text-align: center;
}</style>
